<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/commu.css">
    <title>广场</title>
</head>
<body>
    <!-- 头部模块开始 -->
    <header>
        <!-- 导航栏 -->
        <div class="nav-bar">            
            <nav class="nav-l">
                <!-- logo -->
                <div class="logo">
                    <a href="index.html" title="qq阅读"></a>
                </div>
                <ul class="tab">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="sort.html">分类</a></li>
                    <li><a href="rank.html">排行榜</a></li>
                    <li><a href="community.html">广场</a></li>
                </ul>
            </nav>
            <nav class="nav-r">
                <a href="login.html" class="login">登录</a>
                <a href="register.html" class="reg">免费注册</a>
                <!-- search -->
                <form action="#" method="post" class="search">
                    <input type="text" placeholder="请输入书籍名或作者名">
                    <a href="#" class="ssicon"><img src="./img/icon/sys.ico" class=""></a>
                </form>
            </nav>
            

        </div>
    </header>
   
    <!-- 主要内容模块 -->
    <div class="main container">
        <!-- 社区论坛 -->
        <h3>谈论一下你喜欢的书和看法吧！</h3>
        
        <!-- 评论 -->
        <div class="comment-send">
            <div class="user-face">
                <img class="plz" width="100%" src="./img/tx/0.jpg"></img>
            </div>
            <div class="textarea-pl">
                <input type="text" placeholder="请输入昵称" id="name">
                <textarea name="" id="text" placeholder="发表你的看法"></textarea>
                <button class="submit" id="btn">发表<br>评论</button>
            </div>
        </div>
        <div class="reply">
            <!-- 已发表的评论 -->
            <div class="yifb">
                <div class="reply-item">
                    <div class="user">                   
                        <div class="user-face">
                            <img src="img/tx/8.jpg" alt="">
                        </div>
                        <div class="user-name">长</div>
                        <p>小说中，我最喜欢的其中一个句子，不要温和地走入那个良夜。这句话将主角从融入深渊的边缘拉回,也将我从虚无主义的边缘敲醒。 ---小蘑菇</p>
                    </div>
                    <div class="info">
                        <span>2024-04-15 11:45</span>
                        <span><a href="#" class="remove">删除</a></span>
                    </div>
                </div>
                <div class="reply-item">
                    <div class="user">                   
                        <div class="user-face">
                            <img src="img/tx/10.jpg"alt="">
                        </div>
                        <div class="user-name">送暖</div>
                        <p>我的天，还记得前几年皮斯克的电影《心灵之旅》讲到，当艺术家沉浸在艺术中，艺术家本身就会进入“忘我之地”，而这部电影的英文名就是《soul》---病隙碎笔</p>
                    </div>
                    <div class="info">
                        <span>2024-04-18 14:58</span>
                        <span><a href="#" class="remove">删除</a></span>
                    </div>
                </div>
                <div class="reply-item">
                    <div class="user">                   
                        <div class="user-face">
                            <img src="img/tx/11.jpg"alt="">
                        </div>
                        <div class="user-name">芝上zsss</div>
                        <p>现在有了面向gpt的程序员 ---C语言修仙</p>
                    </div>
                    <div class="info">
                        <span>2024-06-15 11:45</span>
                        <span><a href="#" class="remove">删除</a></span>
                    </div>
                </div>
                <div class="reply-item">
                    <div class="user">                   
                        <div class="user-face">
                            <img src="img/tx/2.jpg"alt="">
                        </div>
                        <div class="user-name">龙萄</div>
                        <p>这么一看我也是面向CSDN的程序员（长叹） ---C语言修仙</p>
                    </div>
                    <div class="info">
                        <span>2024-06-15 11:45</span>
                        <span><a href="#" class="remove">删除</a></span>
                    </div>
                </div>
            </div>
             <div id="new"></div>
        </div>
    </div>
    <!-- 返回顶部模块 -->
    <div class="backtop">
        <img src="./img/tubiao.png" height="100%" width="100%" alt="">
    </div>
    <!-- 脚部模块 -->
    <footer>
        <div class="footer-l">
            <img src="./img/logo.png" width="120px" alt="">
            <p class="copyright" data-v-c28a83fa="">
                Copyright (C) 2024 book.qq.com All Rights Reserved 上海阅文信息技术有限公司 版权所有
            </p>
            <a href="#" class="download">下载APP</a>
        </div>
        <div class="footer-r">
            <dl>
                <dt>关于QQ阅读</dt>
                <dd><a href="#">关于腾讯</a></dd>
                <dd><a href="#">About Tencent</a></dd>
                <dd><a href="#">服务协议</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>更多信息</dt>
                <dd><a href="#"> 开放平台</a></dd>
                <dd><a href="#">违规举报</a></dd>
                 <dd><a href="#">起点中文网</a></dd>
                <dd><a href="#">潇湘书院</a></dd>
                <dd><a href= "#">红袖添香</a></dd>
            </dl>
            <dl>
                <dt>登录/注册</dt>
                <dd><a href="login.html">登录</a></dd>
                <dd><a href="register.html">注册</a></dd>
            </dl>
            
        </div>
    </footer>
    
    <!-- js -->
    <script src="./js/main.js"></script>
    <script>
        // 获取元素
        var submit = document.querySelector('#btn')
        submit.addEventListener('click', function() {
            // 获取头像 属性
            var plz = document.querySelector('.plz').getAttribute("src")
            // 获取昵称
            var name = document.querySelector("#name").value
            // 获取评论
            var text = document.querySelector("#text").value
            // 获取当前时间
            var d = new Date()
            var curtime = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`
            // 合成评论 
            // 创建盒子
            var replyI = document.createElement("div")
            replyI.setAttribute("class","reply-item")
            var user = document.createElement("div")
            user.setAttribute("class","user")
            var user_face = document.createElement("div")
            user_face.setAttribute("class","user-face")
            // 创建头像节点
            var img = document.createElement('img')
            img.setAttribute("src",plz)
            user_face.appendChild(img) 
            user.appendChild(user_face) //追加
            // 昵称节点
            var userName = document.createElement('div')
            userName.setAttribute("class","user-name")
            userName.innerHTML = name
            user.appendChild(userName) //追加
            // 评论节点
            var p = document.createElement('p')
            p.innerHTML = text
            user.appendChild(p) //追加
            // 时间 删除 追加
            var info = document.createElement("div")
            info.setAttribute("class","info") 
            info.innerHTML = `<span>${curtime}</span>
                <span><a href="#" class="remove">删除</a></span>`
            replyI.appendChild(user)
            replyI.appendChild(info)
            // 添加评论
            var yifb = document.querySelector('.yifb')
            yifb.appendChild(replyI)
            // 发表评论后，清空评论框内容
            document.querySelector("#name").value = ""
            document.querySelector("#text").value = ""
            text.value = ""
            // 点击删除将评论删除
            var remove = document.querySelectorAll(".remove")
            remove.forEach(item => {
                item.addEventListener("click" ,removePl)
            })
        })
        function removePl() { //删除函数从父级删除
            this.parentNode.parentNode.parentNode.parentNode.
            removeChild(this.parentNode.parentNode.parentNode)
        }
        // 页面加载后，添加点击删除事件
        function removeS() {
            var remove = document.querySelectorAll(".remove")
            remove.forEach(item => {
                item.addEventListener("click" ,removePl)
            })
        }
        removeS()
        // 随机头像
        function imgS() {
            var number = Math.floor(Math.random()*17)
            document.querySelector(".plz").src = `./img/tx/${number}.jpg`
        }
        imgS()
    </script>
</body>
</html>